<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link type="text/css" rel="stylesheet" href="${ctx}/display/displaymodel.css" />
    <link type="text/css" rel="stylesheet" href="${ctx}/display/jquery.qtip.min.css" />
    <link type="text/css" rel="stylesheet" href="${ctx}/workflowStatic/style/css/definition.node.css" />
    <link type="text/css" rel="stylesheet" href="${ctx}/css/workflow.css" />
    <script src="${ctx}/extends/jquery.min.js" type="text/javascript"></script>
    <script src="${ctx}/display/jquery.qtip.min.js"></script>
    <script src="${ctx}/display/raphael.js"></script>
    <script src="${ctx}/workflowStatic/js/displaymodel.js"></script>
    <script src="${ctx}/workflowStatic/js/bpmn-draw.js"></script>
    <script src="${ctx}/workflowStatic/js/bpmn-icons.js"></script>
    <script src="${ctx}/workflowStatic/js/Polyline.js"></script>
    <script type="text/javascript">
        var __ctx = "${ctx}";
    </script>
    <script src="${ctx}/public/component.js" type="text/javascript"></script>
    <script src="${ctx}/layui/layui.js"></script>
</head>
<body>
<div class="l-layout-header" style="width: 1200px;">流程实例-【<i>${subject}</i>】流程图。</div>
<div class="panel-body clearfix">
    <div>
        <div class="target">
            <div class="icon" style="background:gray;"></div>
            <span>未执行</span>
        </div>
        <div class="target">
            <div class="icon" style="background:#F89800;"></div>
            <span>提交</span>
        </div>
        <div class="target">
            <div class="icon" style="background:#FFE76E;"></div>
            <span>重新提交</span>
        </div>
        <div class="target">
            <div class="icon" style="background:#00FF00;"></div>
            <span>同意</span>
        </div>
        <div class="target">
            <div class="icon" style="background:orange;"></div>
            <span>弃权</span>
        </div>
        <div class="target">
            <div class="icon" style="background:red;"></div>
            <span>当前节点</span>
        </div>
        <div class="target">
            <div class="icon" style="background:blue;"></div>
            <span>反对</span>
        </div>
        <div class="target">
            <div class="icon" style="background:#8A0902;"></div>
            <span>驳回</span>
        </div>
        <div class="target">
            <div class="icon" style="background:#023B62;"></div>
            <span>撤销</span>
        </div>
        <div class="target">
            <div class="icon" style="background:#338848;"></div>
            <span>会签通过</span>
        </div>
        <div class="target">
            <div class="icon" style="background:#82B7D7;"></div>
            <span>会签不通过</span>
        </div>
        <div class="target">
            <div class="icon" style="background:#EEAF97;"></div>
            <span>人工终止</span>
        </div>
        <div class="target">
            <div class="icon" style="background:#C33A1F;"></div>
            <span>完成</span>
        </div>
    </div>
</div>
<div style="padding-top:20px;float:center;clear:both;" class="bpmnModelDiv">
    <div style="margin-bottom: 5px; "><b>说明：</b>点击任务节点可以查看节点的执行人员。
    </div>
   <!-- 显示流程图的div框框 -->
    <div id="bpmnModel" style="margin:34px auto 0;"></div>
</div>

<!--qtip展示-->
<script id="tip" type="text/html">
    {{#  layui.each(d.taskOpinionList, function(index, obj){ }}
				<table class="table-task" cellpadding="0" cellspacing="0" border="0">
				<tr>
                    <th>任务名称: </th>
				    <td>{{obj.taskName}}</td>
                </tr>
                    <tr>
                    {{#  if(obj.checkStatus == -1){ }}

                    <th>执行人: </th>
                    {{#  if(obj.taskExeStatus==null){ }}
                    <td></td>
                    {{#  }else if(obj.taskExeStatus!=null){ }}
                        <td><a style="color: blue" href="javascript:userInfo('{{obj.taskExeStatus.executorId}}');">{{obj.taskExeStatus.executor}}</a></td>
                    {{#  } }}
                         <tr>
                        <th>候选人：</th>
                        {{#  if(obj.candidateUserStatusList==null){ }}
                        <td></td>
                        {{#  }else if(obj.candidateUserStatusList!=null){ }}
                            <td>
                        {{#  layui.each(obj.candidateUserStatusList, function(index, candidateUserStatus){ }}

                            {{#  if(candidateUserStatus.type=="user"){ }}
                                <a style="color:blue" href="javascript:userInfo('{{candidateUserStatus.executorId}}');">{{candidateUserStatus.candidateUser}}</a>

                                <span>
                                    {{# if(candidateUserStatus.isRead){ }}
                                    --(<font color='green'>已读</font>)
                                    {{# }else if(!candidateUserStatus.isRead){ }}
                                    --(<font color='red'>未读</font>)
                                    {{# } }}
                                </span>
                    {{#  }else if(candidateUserStatus.type=="org"){ }}
                             <a style="color:blue" href="javascript:;" candidateUserUrl="userPosition/queryUserByOrgIds?orgId={{candidateUserStatus.executorId}}">{{candidateUserStatus.candidateUser}}(组织)</a>

                    {{#  }else if(candidateUserStatus.type=="pos"){ }}
                                <a style="color:blue" href="javascript:;">
                                    {{candidateUserStatus.candidateUser}}(岗位)</a>
                    {{#  }else if(candidateUserStatus.type=="role"){ }}
                                <a style="color:blue" href="javascript:;" candidateUserUrl="userRole/getUserListByRoleId?roleId={{candidateUserStatus.executorId}}">
                                    {{candidateUserStatus.candidateUser}}(角色)</a>
                    {{#  }else if(candidateUserStatus.type=="group"){ }}
                                    {{candidateUserStatus.candidateUser}}(用户分组)

                    {{#  } }}
                        {{#  }); }}
                            </td>
                        {{#  } }}
                </tr>
                    {{#  } }}
                    </tr>
                    {{#  if(obj.checkStatus != -1){ }}
                    <tr>
                    <th>执行人: </th>
                    <td><a style="color: blue" href="javascript:userInfo('{{obj.exeUserId}}');">{{obj.exeFullname}}</a></td>
                </tr>
                    {{#  } }}
                <tr>
                    <th  nowrap="nowrap">开始时间: </th>
                    <td>{{obj.startTimeStr}}</td>
                </tr>
                <tr>
                    <th>结束时间: </th>
                    <td>{{obj.endTimeStr}}</td>
                </tr>
                <tr>
                    <th >时长: </th>
                    <td>{{obj.durTimeStr}}</td>
                </tr>
                <tr><th>状态: </th>
                    <td>{{obj.status}}</td>
                </tr>
                <tr>
                    <th>意见: </th>
                    <td>{{obj.opinion}}</td>
                </tr>
                </table><br>
    {{#  }); }}
</script>
<script id="tip2" type="text/html">

    <div>执行状态 ： <span style='color:red;line-height: 24px;'>未执行</span> </div>
<table class="table-task" cellpadding="0" cellspacing="0" border="0">
    <tr >
        <th width="50">执行人: </th>
        <td>

            {{#  layui.each(d.taskExecutorList, function(index, obj){ }}
            {{# if(obj.type == "user"){ }}
            <a style="color:blue" href="javascript:userInfo('{{obj.executeId}}');">{{obj.executor}}</a>
            {{#  }else if(obj.type=="org"){ }}
            <a style="color:blue" href="javascript:;" candidateUserUrl="userPosition/queryUserByOrgIds?orgId={{obj.executeId}}">{{obj.executor}}(组织)</a>
            {{#  }else if(obj.type=="role"){ }}
            <a style="color:blue" href="javascript:;" candidateUserUrl="userRole/getUserListByRoleId?roleId={{obj.executeId}}">{{obj.executor}}(角色)</a>
            {{#  } }}
            {{obj.mainOrgName}}--{{obj.mainOrgName}}</br>
            {{#  }); }}
        </td>
    </tr>
</table>

</script>

<script id="tipThree" type="text/html">

    <div  style="height:150px;width:150px;overflow:auto">
    <table class="table-task" cellpadding="0" cellspacing="0" border="0">

            {{#  layui.each(d.data, function(index, obj){ }}
        <tr >
            <th width="50">{{index+1}} </th>


                {{# if(obj.userName!=null){ }}
            <td>
               {{obj.userName}}
            </td>
                {{# }else if(obj.userName==null){ }}
            <td>{{obj.fullName}}</td>

                {{# } }}

        </tr>
                {{#  }); }}


    </table>
    </div>
</script>
<script type="text/javaScript">
    layui.config({
        base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index','setter','laytpl'],function () {
        var $ = layui.$;
        var procInstId="${procInstId!}";
        var procDefId='${procDefId!}';
        var laytpl=layui.laytpl;
        var setter=layui.setter;
   window.userInfo= function (userId){
        parent.layer.open({
            type: 2,
            title: '人员详细信息',
            area: ['938px', '620px'],
            content:serverPath.systemPath+setter.sysLinkPath+ 'sysUser/view/view?userId=' +userId
        });
    };
    $(function (){
            var modelUrl = '${ctx}/workflow/bpmnImage/modelJson?procInstId='+procInstId+'&procDefId='+procDefId;
            $.ajax({
                url: modelUrl + '&nocaching=' + new Date().getTime(),
                type: "get",
                contentType: 'application/json',
                dataType: 'json',
                success: function (data) {
                    if ((!data.elements || data.elements.length === 0) && (!data.pools || data.pools.length === 0)) {
                        return;
                    }
                    var INITIAL_CANVAS_WIDTH = data.diagramWidth;
                        INITIAL_CANVAS_WIDTH += 30;
                    var INITIAL_CANVAS_HEIGHT = data.diagramHeight + 50,
                        canvasWidth = INITIAL_CANVAS_WIDTH,
                        canvasHeight = INITIAL_CANVAS_HEIGHT,
                        viewBoxWidth = INITIAL_CANVAS_WIDTH,
                        viewBoxHeight = INITIAL_CANVAS_HEIGHT;
                    $('#bpmnModel').width(INITIAL_CANVAS_WIDTH);
                    $('#bpmnModel').height(INITIAL_CANVAS_HEIGHT);
                    <!--创建画布-->
                    paper = Raphael(document.getElementById('bpmnModel'), canvasWidth, canvasHeight);
                    paper.setViewBox(0, 0, viewBoxWidth, viewBoxHeight, false);
                    paper.renderfix();

                    if (data.pools)
                    {
                        for (var i = 0; i < data.pools.length; i++)
                        {
                            var pool = data.pools[i];
                            _drawPool(pool);
                        }
                    }

                    var modelElements = data.elements;
                    for (var i = 0; i < modelElements.length; i++)
                    {
                        var element = modelElements[i];
                        var drawFunction = eval("_draw" + element.type);

                        drawFunction(element);
                        if(element.type==="multiUserTask"||element.type==="UserTask"){
                            _showTip($("#"+element.id),element);
                        }
                        else if(element.type==="StartEvent"){
                            $("#"+element.id).mouseenter(function () {
                                    layer.tips('开始','#startEvent1',{tips:[1,'green'],time: 1000});
                            })
                        }
                        else if(element.type==="EndEvent"){
                            $("#"+element.id).mouseenter(function () {
                                layer.tips('结束', '#'+element.id,{tips:[1,'#ff6700'],time: 1000});
                            })
                        }
                    }
                    //画流程的流向箭头
                    if (data.flows)
                    {
                        for (var i = 0; i < data.flows.length; i++)
                        {
                            var flow = data.flows[i];
                            if (flow.type === 'sequenceFlow') {
                                _drawFlow(flow);
                            } else if (flow.type === 'association') {
                                _drawAssociation(flow);
                            }
                        }
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert("暂无数据，请稍后操作！" + XMLHttpRequest.status);
                }
            });
        //分情况隐藏关闭按钮
        //调整流程父容器高度
        var heightF = $("#LAY_app").height();
        if ($(".layui-tab-title").length>0){
            $("#close").hide();
            setTimeout(function () {
                $(".bpmnModelDiv").height(heightF-$(".l-layout-header").height()-$(".panel-body").height()-110)
            },100)
        }else {
            setTimeout(function () {
                $(".bpmnModelDiv").height(heightF-$(".l-layout-header").height()-$(".panel-body").height()-20)
            },100)
        }
    });
   //获取组织中的人员
        function getPeopleByOrgId(url) {
            var temData;
            $.ajax({
                url:url,
                async:false,
                dataType:'json',
                success:function(data){
                    temData=data;
                },
                error:function (err) {
                }
            });
            return temData;
        }
        //展示组织角色等成员列表
        function showResult(){
            var str;
            var targetUrl = $(this).attr("candidateUserUrl");
            var terminUrl=serverPath.systemPath +setter.sysLinkPath+targetUrl;
            //获取tip3 的元素
            var tip3=tipThree.innerHTML;
            var peopleInfo=getPeopleByOrgId(terminUrl);

           laytpl(tip3).render(peopleInfo, function(htmls){
               str=htmls;
           });
            $(this).qtip({
                content:{
                    text:str,
                    title:{
                        text:"执行人列表"
                    }
                },
                position: {
                    at:'top left',
                    target:'event',
                    viewport:  $(window)
                },
                show:{
                    event:"focus mouseenter"
                },
                hide: {
                    event:'unfocus mouseleave',
                    fixed:true
                },
                style: {
                    classes:'ui-tooltip-light ui-tooltip-shadow'
                }
            });
        }

    function _showTip(htmlNode, element) {
        var nodeId=element.id;
        var tableHtml = getTableHtml(nodeId);
        htmlNode.qtip({
            content: {
                text: tableHtml,
                title: {
                    text:"任务执行情况"
                }
            },
            position: {
                my: 'top left',
                at: 'top center',
                viewport: jQuery('#bpmnModel')
            },

            hide: {
                event:'click mouseleave',
                leave: false,
                fixed:true,
                delay:300
            },
            style: {
                classes: 'ui-tooltip-kisbpm-bpmn'
            },
            show:{
                effect: function(offset) {
                    $(this).slideDown(200);
                    $("a[candidateUserUrl]").each(showResult);
                }
            }
        });
    }
    //获取流程节点状态
        var taskNodeStatus={};
    function loadStatus(nodeId){
        var status = taskNodeStatus[nodeId];
     if(!status && status!=""){
            var url='${ctx}/workflow/processRun/getFlowStatusByInstanceIdAndNodeId';
            var params={
                instanceId:procInstId,
                nodeId:nodeId
            };
            $.ajax({
                url:url,
                data:params,
                async:false,
                dataType: 'json',
                success:function (data) {
                    status=data;
                },
                error:function (err) {
                }
            });
           taskNodeStatus[nodeId]=status;
         }
        return status;
    };
    //构建显示的html
    function getTableHtml(nodeId){
        var node = loadStatus(nodeId);
        if (!node){
            return false;
        }
        var taskOpinionList = node.taskOpinionList;
        var taskExecutorList = node.taskExecutorList;
        var lastCheckStatus = node.lastCheckStatus;
        var html = [ '<div style="max-height:277px;width:260px;overflow:auto;">' ];
        if (lastCheckStatus != "-2") {  //正在执行的节点
            if (taskOpinionList.length === 0) {
                return false;
            } else {
                var tipHtml=tip.innerHTML;
                    var str="";
               laytpl(tipHtml).render(node, function(htmls){
                    str=htmls;
                });
                html.push(str);
                html.push('</div>');
            }
        }else if(lastCheckStatus === -2){ //未执行的节点
            if (taskExecutorList.length === 0) {
                return "未执行";
            } else {
                var tip2Html = tip2.innerHTML;
                var str="";
                laytpl(tip2Html).render(node, function(htmls){
                    str=htmls;
                });
                html.push(str);
                html.push('</div>');
            }
        }
        return html.join('');
    }
    });
    </script>
<style>
    .clearfix:after{content:"";display:block;clear:both;height:0;line-height:0;visibility:hidden;}
    .clearfix{zoom:1;}
</style>
</body>
</html>
